# PC 端 Web 页面 UI 设计规范 **适用平台**：桌面浏览器（Chrome、Edge、Firefox、Safari 等） **目标分辨率**：最小支持 1280px 宽度，推荐设计宽度为 1440px **设计基准**：以 1440px 宽度作为设计稿基准，采用响应式或固定宽度容器布局 --- ## 一、布局与间距 ### 1. 布局原则 - 内容区域建议使用 **固定宽度容器**（如 1200px 或 1440px），居中显示 - 页面左右留白，避免内容贴边 - 采用 **栅格系统**（如 12 栏栅格），栏宽 24px，间距（gutter）24px - 侧边导航或边栏宽度建议：200px / 240px / 280px（根据功能复杂度选择） ### 2. 间距系统（8px 基准） - 最小单位：**4px** - 推荐间距：8px / 12px / 16px / 24px / 32px / 40px / 48px / 64px - 段落间距：20px - 模块垂直间距：32px - 表单项垂直间距：24px --- ## 二、字体规范 | 元素 | 字号 (px) | 行高 | 字重 | 颜色 | 说明 | |------|----------|------|------|------|------| | 页面主标题（H1） | 28 | 1.4 | Bold | `#1F1F1F` | 首屏核心标题 | | 模块标题（H2） | 22 | 1.4 | SemiBold | `#1F1F1F` | 二级标题 | | 小标题（H3） | 18 | 1.5 | Medium | `#333333` | 卡片/区块标题 | | 正文 | 14 | 1.6 | Regular | `#333333` | 主要阅读内容 | | 辅助文字 | 12 | 1.5 | Regular | `#8C8C8C` | 说明、提示、时间、标签等 | | 按钮文字 | 14 | 1.4 | Medium | `#FFFFFF` 或主题色 | 无下划线，居中对齐 | | 表格文字 | 13 | 1.5 | Regular | `#333333` | 表格内内容 | > **字体栈建议**： > `font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;` --- ## 三、色彩系统 ### 1. 主色（品牌色） - 主色（Primary）：`#1677FF`（示例，可根据品牌调整） - 主色-浅：`#E6F4FF` - 主色-深：`#0958D9` ### 2. 功能色 - 成功：`#52C41A` - 警告：`#FAAD14` - 错误：`#F5222D` - 信息：`#1677FF` ### 3. 中性色 - 背景： - 页面背景：`#FFFFFF` - 容器背景：`#FAFAFA` - 悬浮层背景：`#FFFFFF` - 文字： - 主色：`#1F1F1F` - 次色：`#333333` - 辅助色：`#8C8C8C` - 禁用色：`#BFBFBF` - 边框/分割线：`#D9D9D9` / `#E8E8E8` --- ## 四、按钮规范 | 类型 | 背景色 | 文字色 | 边框 | 圆角 | 高度 | 内边距（左右） | |------|--------|--------|------|------|------|----------------| | 主按钮 | 主色 | `#FFFFFF` | 无 | 4px | 36px | 20px | | 次按钮 | `#FFFFFF` | 主色 | 1px solid 主色 | 4px | 36px | 20px | | 文字按钮 | 透明 | 主色 | 无 | 0 | 自适应 | 8px | | 危险按钮 | `#F5222D` | `#FFFFFF` | 无 | 4px | 36px | 20px | | 幽灵按钮 | 透明 | `#333333` | 1px solid `#D9D9D9` | 4px | 36px | 20px | > - 按钮最小点击区域：**36×36px** > - Hover 状态：主按钮加深 10%，次按钮背景变为 `#F0F5FF` > - 禁用状态：背景 `#F5F5F5`，文字色 `#BFBFBF`，无交互 --- ## 五、表单控件 ### 1. 输入框（Input） - 高度：36px - 圆角：4px - 边框：1px solid `#D9D9D9` - 聚焦状态：边框色 `#1677FF`，带 0–4px 阴影 `0 0 0 2px rgba(22, 119, 255, 0.2)` - 占位符颜色：`#BFBFBF` - 错误状态：边框 `#F5222D`，提示文字 12px，`#F5222D` ### 2. 下拉选择器（Select） - 高度：36px - 右侧下拉图标：12px ▼ - 选项高度：32px - 悬停背景：`#F5F5F5` ### 3. 复选框（Checkbox）与单选框（Radio） - 尺寸：16×16px - 选中色：主色 - 标签文字：14px，与控件垂直居中对齐 ### 4. 开关（Switch） - 宽度：44px，高度：22px - 圆点直径：18px - 开启：背景 `#1677FF`，圆点 `#FFFFFF` - 关闭：背景 `#D9D9D9`，圆点 `#FFFFFF` --- ## 六、图标（Icon） - 推荐使用 **SVG** 或 **Icon Font** - 常用尺寸：16px / 20px / 24px - 导航/操作图标：20px - 图标与文字同行时，垂直居中对齐，间距 6px - Hover 状态：颜色变为 `#595959` 或主色 --- ## 七、动效与反馈 ### 1. 悬停（Hover） - 所有可交互元素必须有 hover 反馈 - 按钮/卡片：轻微背景变化或阴影 - 链接：下划线或颜色变化 ### 2. 点击反馈 - 按钮点击：0.1s 压感（scale: 0.98）或背景加深 - 表单聚焦：边框高亮 + 微阴影 ### 3. 加载状态 - 全局加载：覆盖层 + spinner（主色） - 局部加载：按钮内嵌 loading 或骨架屏（Skeleton） ### 4. 通知提示（Toast / Notification） - 位置：右上角（全局）或操作附近（局部） - 自动消失：3 秒 - 类型：成功（绿色）、警告（黄色）、错误（红色）、信息（蓝色） --- ## 八、适配与响应式（可选扩展） - 支持 **桌面端响应式断点**（建议）： - ≥1440px：大屏布局 - 1200px – 1439px：标准桌面 - 992px – 1199px：小桌面/大平板（可简化侧边栏） - 使用 `max-width` 容器，避免内容无限拉伸 - 图片/图表应支持缩放，避免固定像素宽高 --- ## 九、无障碍（Accessibility） - 所有交互元素支持 **键盘 Tab 导航** - 颜色对比度 ≥ 4.5:1（正文 vs 背景） - 表单控件必须关联 `